<template>
    <el-dialog :visible.sync="dialogVisibletype"
               :before-close="modalClose"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               width="70%">
        <div id="one" ref="content" class="containers">
            <div id="two" ref="canvas" class="canvas"></div>
        </div>
    </el-dialog>
</template>

<script>
import CustomBpmnViewer from "./customer-viewer";
import axios from "axios";
import url from "@/http/axios";
export default {
  name: "FlowBpmn",

  components: {},
  props: ['dialogVisibletype'],
  data() {
    return {
      bpmnViewer: null,
    };
  },

  created() {
  },

  methods: {
    modalClose() {
      this.$emit("clan", false);
    },
      createNewDiagram(value) {
          this.$nextTick(()=>{
              const params = {
                  processId: value,
              };
              if (!params.processId) {
                  return;
              }
              let one = document.querySelector('#one');
              let two = document.querySelector('#two');
              one.removeChild(two);
              one.innerHTML='<div id="two" ref="canvas" class="canvas"></div>';
              let env = url.defaults.baseURL;
              axios
                  .all([
                      axios.get(`${env}/process/getDiagramXml`, {
                          params: params,
                          headers:{
                              'binding':sessionStorage.getItem('binding')
                          }
                      }),
                      axios.get(`${env}/process/loadFlowByProcessId`, {
                          params: params,
                          headers:{
                              'binding':sessionStorage.getItem('binding')
                          }
                      }),
                  ])
                  .then(
                      axios.spread((userResp, reposResp) => {
                          // 上面两个请求都完成后，才执行这个回调方法
                          const canvas = document.querySelector('#two');
                          // 建模
                          this.bpmnViewer = new CustomBpmnViewer({
                              container: canvas,
                          });
                          const self = this;
                          self.bpmnViewer.importXML(userResp.data, function (err) {
                              if (err) {
                                  console.error(err);
                              } else {
                                  const canvas = self.bpmnViewer.get("canvas");
                                  const activeNodes = reposResp.data.result.activeActivityIds;
                                  const highLightedFlows = reposResp.data.result.highLightedFlows;
                                  activeNodes.forEach((id) => {
                                      canvas.addMarker(id, "active");
                                  });
                                  highLightedFlows.forEach((id) => {
                                      canvas.addMarker(id, "passed");
                                  });
                              }
                          });
                          this.removeLogo();
                      })
                  )
                  .catch((err) => {
                      console.log(err);
                  });
          });
      },
    // 删除bpmn-js的logo
    removeLogo() {
      const bjsIoLogo = document.querySelector(".bjs-powered-by");
      while (bjsIoLogo.firstChild) {
        bjsIoLogo.removeChild(bjsIoLogo.firstChild);
      }
    },
  },
};
</script>

<style lang="less">
.containers {
  height: 400px;
}

.canvas {
  width: 100%;
  height: 100%;
}

.active .djs-visual > :nth-child(1) {
  stroke: rgba(66, 180, 21, 0.7) !important; /* color elements as green */
  fill: rgba(66, 180, 21, 0.5) !important;
}

.passed .djs-visual > :nth-child(1) {
  stroke: rgba(66, 180, 21, 0.7) !important; /* color elements as green */
}

.red .djs-visual > :nth-child(1) {
  stroke: rgba(236, 54, 47, 0.7) !important; /* color elements as green */
  fill: rgba(236, 54, 47, 0.5) !important;
}
</style>
